<template>
  <div>
    <el-row class="bgf">
      <el-col :span="12" :offset="5">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="基本信息" name="first">
            <!-- model表单的数据 -->
            <!-- rules：校验规则 -->
            <el-form
              :model="ruleForm"
              :rules="rules"
              ref="ruleForm"
              label-width="100px"
              class="demo-ruleForm"
            >
              <!-- prop="type"校验 ，v-model="ruleForm.type"传值-->
              <el-form-item label="一级分类" prop="first_cateid">
                <el-select
                  v-model="ruleForm.first_cateid"
                  @change="firstChange"
                >
                  <el-option label="请选择" value></el-option>
                  <el-option
                    v-for="(item, index) in firstCateList"
                    :key="index"
                    :label="item.catename"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="二级分类" prop="second_cateid">
                <el-select v-model="ruleForm.second_cateid">
                  <el-option label="请选择" value></el-option>
                  <el-option
                    v-for="(item, index) in secondCateList"
                    :key="index"
                    :label="item.catename"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item label="分类名称" prop="catename">
          <el-input v-model="ruleForm.catename"></el-input>
        </el-form-item> -->
              <el-form-item label="图片" prop="img">
                <!-- action 属性： 上传地址！ 如果写了地址，那么选择图片之后就会自动上传！  -->
                <!-- list-type属性： 上传控件的类型 -->
                <!-- file-list属性： 文件列表  [{name:'',url:""}] -->
                <!-- limit属性：上传最大个数 -->
                <!-- on-change: 图片变了的时候 -->
                <!-- name属性： 上传的对应字段 -->
                <!-- auto-upload:是否自动上传 -->
                <el-upload
                  action="#"
                  list-type="picture-card"
                  :file-list="fileList"
                  :on-exceed="limitImg"
                  :auto-upload="false"
                  :limit="1"
                  :on-change="handleChange"
                >
                  <i class="el-icon-plus"></i>
                </el-upload>
              </el-form-item>
              <el-form-item label="商品规格属性" prop="specsattr">
                <!-- multiple：下拉框的多选 -->
                <el-select
                  v-model="ruleForm.specsattr"
                  multiple
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="ruleForm.status">
                  <el-radio :label="1">正常</el-radio>
                  <el-radio :label="2">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item>
                <el-button
                  v-if="$route.params.id > 0"
                  type="primary"
                  @click="submitForm('ruleForm')"
                  >立即修改</el-button
                >
                <el-button v-else type="success" @click="submitForm('ruleForm')"
                  >立即添加</el-button
                >
                <el-button>重置</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="详细描述" name="second">
            <div id="editor"></div>
          </el-tab-pane>
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import { getCateList, getSecondCateList } from "../../request";
import E from 'wangeditor'
export default {
  data() {
    return {
      // 一级分类的下拉框数据
      firstCateList: [],
      // 二级分类的下拉框数据
      secondCateList: [],
      ruleForm: {
        first_cateid: "",
        second_cateid: "",
        img: "",
        specsattr: [],
        status: 1,
      },
      rules: {
        first_cateid: [
          { required: true, message: "请选择一级分类", trigger: "blur" },
        ],
        second_cateid: [
          { required: true, message: "请选择二级分类", trigger: "blur" },
        ],
      },
      // 富文本编辑器对象
      editor: null,
      // 照片墙的历史数据
      fileList: [],
      // 规格的属性值对应的下拉选框
      options: [
        { label: "1", value: 1 },
        { label: "2", value: 2 },
        { label: "3", value: 3 },
      ],
      activeName: 'first'
    };
  },
  created() {
    // 发请求获取一级分类的数据
    this.getFirstCateList();
  },
  mounted() {
    // 在editor这个div中创建编辑器
    this.editor = new E('#editor');
    this.editor.create();
    // 编辑器赋值
    this.editor.txt.html('<mark>用 JS 设置的内容</mark>')
    // 获取编辑器的值editor.txt.html();
  },
  methods: {
    // 发请求获取一级分类的数据
    async getFirstCateList() {
      let res = await getCateList();
      this.firstCateList = res.list;
    },
    // 文件上传-修改文件
    handleChange(file) {
      // 当文件变化时，将最终的值传给img
      this.ruleForm.img = file.raw;
    },
    // 超出上限的提示
    limitImg() {
      this.$message.warning("分类图片最多添加1个");
    },
    // 监听一级分类的修改，获取二级分类的数据
    async firstChange() {
      this.ruleForm.second_cateid = "";
      // 发请求获取二级分类的数据，通用的方法
      // let res = await getSecondCateList(this.ruleForm.first_cateid);
      // this.secondCateList = res.list;
      // ====================================
      // 不发请求的方式,这个项目中已经有了完整的数据，所以可以不发请求，前端自己做筛选
      this.firstCateList.forEach((item) => {
        if (item.id == this.ruleForm.first_cateid) {
          this.secondCateList = item.children ? item.children : [];
        }
      });
    },
    // 标签页点击切换
    handleClick(tab, event) {
        console.log(tab, event);
      }
  },
};
</script>
<style lang="">
</style>